<template>
  <div class="account">
    <Row>
      <Col :lg="7" :md="12" :sm="13" :xs="24">
          <Card>
              <i class="money1"></i>
              <Div>
                  <p>可提现金额 <Button @click="applyShow(0)">提现</Button></p>
                  <h1>{{ 123 }}元</h1>
              </Div>
          </Card>
      </Col>
    </Row>
    <Row>
      <Form :model="searchForm">
          <FormItem>
              <Label>提现状态</Label>
              <Select v-model="searchForm.status" clearable placeholder="全部">
                  <Option v-for="(item,index) in s_list" :value="item.id" :key="index" :label="item.name"></Option>
              </Select>
          </FormItem>
          <FormItem>
              <Label>支付时间</Label>
              <Date-picker format="yyyy-MM-dd" placement="bottom-end" placeholder="开始时间" style="width: 200px" @on-change="handleBalbnceTimeStart"></Date-picker>
              -
              <Date-picker format="yyyy-MM-dd" placement="bottom-end" placeholder="结束时间" style="width: 200px" @on-change="handleBalbnceTimeEnd"></Date-picker>
          </FormItem>
          <Button icon="ios-search" @click="handleBalbnceSearch">查询</Button>
      </Form>
    </Row>
    <Row>
        <Table :columns="account_title" :data="account_data" ></Table>
        <Page :total="page.total" :current.sync="page.current" :page-size="page.size" show-elevator show-total class-name="page" @on-change="handleBalbncePage"></Page>
    </Row>
    <Modal v-model="apply" class-name="apply" :transfer="false" title="提现申请" width="400">
        <Form :model="dialog" :label-width="90" ref="dialog">
            <FormItem label="提现方式：">
                {{ dialog.apply_pay}}
            </FormItem>
            <FormItem label="收款人：">
                {{ dialog.apply_name}}
            </FormItem>
            <FormItem label="收款账户：">
                {{ dialog.apply_account}}
            </FormItem>
            <FormItem label="提现金额：">
                ￥<Input placeholder="输入提现金额" v-if="is_money" size="small" v-model="dialog.apply_money"></Input><span v-else>{{ dialog.apply_money }}</span>
            </FormItem>
        </Form>
        <Div slot="footer">
            <Button type="primary" @click="handleBalbnceMoney">确定提现</Button>
        </Div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return{
            apply: false,
            is_money: false,
            money: '0.00',
            Tmoney: '0.00',
            searchForm: {
                status: '',
                start: '',
                end: ''
            },
            dialog: {
                apply_pay:'',
                apply_name: '',
                apply_account: '',
                apply_money: ''
            },
            page: {
                total: 0,
                size: 1,
                current: 1
            },
            s_list:[],
            account_title:[
                {
                    title: '提现流水号',
                    align: 'center',
                    key: 'withdraw_no'
                },
                {
                    title: '提现时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '提现金额',
                    align: 'center',
                    key: 'money'
                },
                {
                    title: '提现状态',
                    align: 'center',
                    render:(h, params) => {
                        if(params.row.status === 0){
                            return h('span',{
                                style:{
                                    color: '#229f16'
                                }
                            },'提现成功')
                        } else if (params.row.status === 1) {
                            return h('span',{
                                style:{
                                    color: '#ed3f14'
                                }
                            },'提现失败')
                        } else if (params.row.status === 3) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#333'
                                    }
                                }, '待确认'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        } else if (params.row.status === 5) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#2d8cf0'
                                    }
                                }, '待处理'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        } else if (params.row.status === 6) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#f60'
                                    }
                                }, '处理中'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        }
                    }
                },
                {
                  title: '操作',
                  align: 'center',
                  
                }
            ],
            account_data:[]
        }
  }
}
</script>

<style lang="less" scoped>
  @import '../balance.less';
</style>

